<template>
  <ElTabs v-model="activeTab" tab-position="top">
    <ElTabPane label="属性设置" name="property">
      <ElPropsPanel :designer="designer"></ElPropsPanel>
      <FormItemPanel :designer="designer"></FormItemPanel>
    </ElTabPane>
    <ElTabPane label="字段设置" name="search">
      <TableColumnPanel :designer="designer"></TableColumnPanel>
      <SearchColumnPanel :designer="designer"></SearchColumnPanel>
    </ElTabPane>
    <ElTabPane label="操作设置" name="operation">
      <TableToolbarPanel :designer="designer"></TableToolbarPanel>
      <TableActionPanel :designer="designer"></TableActionPanel>
      <PaginationPanel :designer="designer"></PaginationPanel>
    </ElTabPane>
  </ElTabs>
</template>

<script setup lang="ts" name="PropertyPanel">
import { ref } from "vue";
import { ElTabs, ElTabPane } from "element-plus";
import ElPropsPanel from "../ElPropsPanel.vue";
import FormItemPanel from "../FormItemPanel.vue";
import TableColumnPanel from "./TableColumnPanel.vue";
import SearchColumnPanel from "./SearchColumnPanel.vue";
import TableToolbarPanel from "./TableToolbarPanel.vue";
import TableActionPanel from "./TableActionPanel.vue";
import PaginationPanel from "./PaginationPanel.vue";
const activeTab = ref("property");
defineProps({
  designer: {
    type: Object
  }
});
</script>

<style scoped></style>
